<template>
  <el-form :model="form" label-width="auto" style="max-width: 600px">
    <el-form-item label="文章标题">
      <el-input v-model="form.name" />
    </el-form-item>
    <!-- 状态 -->
    <el-form-item label="是否公开">
      <el-switch v-model="form.status" />
    </el-form-item>

    <!-- 内容框 -->
    <el-form-item label="内容">
      <el-input v-model="form.content" type="textarea" />
    </el-form-item>
    <!-- 按钮 -->
    <el-form-item>
      <el-button type="primary" @click="onSubmit">确认</el-button>
      <el-button @click="ResetForm">重置</el-button>
    </el-form-item>
  </el-form>

  
</template>

<script setup>
import { SendArticle } from "@/api/article";
import { reactive } from "vue";

// do not use same name with ref
const form = reactive({
  name: "",
  content:"",
  status:false,
});

const onSubmit = () => {
  console.log("submit!");
  console.log(form.name,form.content,form.status);
  
  SendArticle(form.name,form.content,form.status).then(r=>{
    console.log(r); 
    ResetForm()  
  })
};
function ResetForm(){
  form.name=""
  form.status=""
  form.status=false
}
</script>
<style></style>
